import { Image, Popup } from '@nutui/nutui-react';
import { PopupProps } from '@nutui/nutui-react/dist/types/packages/popup';
import { ReactNode, useEffect, useState } from 'react';

import { render } from '@/application/utils/render';

interface Props extends Partial<PopupProps> {
  onConfirm: () => void;
  content?: ReactNode;
}
export const ReceiveSuccess = ({ visible, onClose, onConfirm, content }: Props) => {
  return (
    <Popup
      lockScroll
      visible={visible}
      onClose={onClose}
      style={{
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '2007',
        background: 'transparent'
      }}
    >
      <div>
        <div className="relative mx-auto w-73.75 rounded-lg bg-white px-5 pb-3.75 pt-12.5">
          <Image
            src={new URL('/images/home/gift.png', import.meta.env.VITE_IMG_BASE_URL).href}
            className="!absolute -top-10.5 left-0 right-0 mx-auto h-21 w-21"
          />
          <div className="text-center text-[18px] font-semibold">领取成功</div>
          {content ? (
            content
          ) : (
            <div className="pt-3.75 text-[15px] leading-[25px] text-[#333]">
              奖品兑换后稍后将进行发放，请耐心等待。兑换记录可在[活动页面-已获奖励]进行查看
            </div>
          )}
          <div
            className="mt-6.25 flex h-10 items-center justify-center rounded-full bg-gradient-to-r from-[#FF4800] to-[#FDAA36] text-[17px] text-white"
            onClick={onConfirm}
          >
            知道了
          </div>
        </div>
        <Image
          onClick={onClose}
          src={new URL('/images/home/close_icon.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="mx-auto mt-7.5 h-8.75 w-8.75"
        />
      </div>
    </Popup>
  );
};

ReceiveSuccess.show = (props: any) => {
  const body = document.body;

  const container = document.createElement('div');
  body.appendChild(container);

  let destroy: VoidFunction = () => undefined;
  const Temp = () => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
      setVisible(true);
    }, []);

    destroy = () => {
      setVisible(false);
    };
    return (
      <ReceiveSuccess
        {...props}
        onClose={() => {
          setVisible(false);
        }}
        visible={visible}
        onConfirm={() => {
          setVisible(false);
          props.onConfirm();
        }}
      />
    );
  };
  render(<Temp />, container);

  return destroy;
};
